
function mouseover(){
    $("#small-box").mouseover(function(){
        $("#mask").css({
            display:"block"
        });
        $("#bigg-box").css({
            display:"block"
        });
    });
}
function mouseout(){
    $("#small-box").mouseout(function(){
        $("#mask").css({
            display:"none"
        });
        $("#bigg-box").css({
            display:"none"
        });
    });
}
function change(){
    $(".imgs1").click(function(){
        let url = $(this).attr("src")
        $("#small-box").css({
            backgroundImage:`url(${url})`
        })
        $("#bigg-box").css({
            backgroundImage:`url(${url})`
        })
    })
}
function mousemove(){
    $("#small-box").mousemove(function(event){
        let left=event.pageX-$("#small-box").offset().left-$("#mask").width()/2;
        let top=event.pageY-$("#small-box").offset().top-$("#mask").height()/2;
        // 拖拽边界
        if(left<0){
            left=0;
        }
        let maxLeft=$("#small-box").width()-$("#mask").width();
        if(left>maxLeft){
            left=maxLeft;
        }
        if(top<0){
            top=0;
        }
        let maxTop=$("#small-box").height()-$("#mask").height();
        if(top>maxTop){
            top=maxTop;
        }
        $("#mask").css({
            left:left+"px",
            top:top+"px"
        })
        let x=$("#bigg-box").width()*left/$("#mask").width();
        let y=$("#bigg-box").height()*top/$("#mask").height();
        $("#bigg-box").css({
            backgroundPositionX:-x+"px",
            backgroundPositionY:-y+"px"
        })

    })
}

// function addCart(){
//      let a = getCookie("usernum")
//     $.post("goodsAndShoppingCart/addShoppingCart.php",
//     {vipName:a,goodsId :location.search.split('=')[1]},1),function(resText){
//          if(resText==1){
//             location.href="购物车.html";
//              console.log("成功")
//          }else if(resText==0){
//             console.log("失败")
//          }
//     }
// }
// $(".b2").click(function(){
//     addCart()
// })
$(function(){
    mouseover();
    mousemove();
    mouseout();
    change();
    
})
